<template>
	<view class="content">
		<text class="title1">设备详细信息</text>
		<view class="input-group">
			<view class="input-row border">
				<text class="title">设备编号</text>
				<m-input type="text" focus v-model="listData.devId" ></m-input>
			</view>
			<view class="input-row border">
				<text class="title">设备型号</text>
				<m-input type="text" focus v-model="listData.devModel" ></m-input>
			</view>
			<view class="input-row border">
				<text class="title">设备名称</text>
				<m-input type="text" focus v-model="listData.devName" ></m-input>
			</view>
			<view class="input-row border">
				<text class="title">类型/属性</text>
				<m-input type="text" focus v-model="listData.devBrand" ></m-input>
			</view>
			<view class="input-row border">
				<text class="title">使用地址</text>
				<m-input type="text" focus v-model="listData.devPosition" ></m-input>
			</view>
			<view class="input-row border">
				<text class="title">使用功能</text>
				<m-input type="text" focus v-model="listData.devFunction" ></m-input>
			</view>
			<view class="input-row border">
				<text class="title">开始时间</text>
				<m-input type="text" focus v-model="listData.sTime" ></m-input>
			</view>
			<view class="input-row border">
				<text class="title">结束时间</text>
				<m-input type="text" focus v-model="listData.eTime" ></m-input>
			</view>
			<view class="input-row border">
				<text class="title">是否加急</text>
				<m-input type="text" focus v-model="listData.isAnxious" ></m-input>
			</view>
		</view>
		<view class="uni-padding-wrap uni-common-mt" v-if="listData.devSituation === '不通过'">
			<button type="primary" @click="handleShow1()">查看回复</button>
		</view>
		<view class="uni-padding-wrap uni-common-mt" v-if="listData.devSituation === '审批中'">
			<button type="warn" @click="handleShow2()">取消申请</button>
		</view>
		<view class="uni-padding-wrap uni-common-mt" v-if="listData.devSituation === '通过'">
			<button type="primary" @click="handleShow3()">设备报修</button>
		</view>
		
		<xy-dialog
			title="回复"
			content="该设备......"
			:show="showDialog1"
			@cancelButton="clickCancel1()"
			@confirmButton="clickConfirm1()">
		</xy-dialog>
		
		<xy-dialog
			title="提示"
			content="确定要删除申请？"
			:show="showDialog2"
			@cancelButton="clickCancel2()"
			@confirmButton="clickConfirm2()">
		</xy-dialog>
		
		<xy-dialog
			title="提示"
			content="确定要设备报修？"
			:show="showDialog3"
			@cancelButton="clickCancel3()"
			@confirmButton="clickConfirm3()">
		</xy-dialog>
	</view> 
</template>

<script>
	import mInput from '@/components/m-input.vue'
	import MxDatePicker from '@/components/mx-datepicker/datepicker.vue'
	import service from '../../service.js';
	import xyDialog from '@/components/xy-dialog/xy-dialog.vue';
	import {
		mapState,
		mapMutations
	} from 'vuex'
	import store from '../../store/index.js'
	
	export default {  
		components: {
			mInput,
			MxDatePicker,
			xyDialog
		},
		data() {
			return {
				listData:{
					id: '',
					devId: '',
					devModel: '',
					devName: '',
					devBrand: '',
					devType: '',
					devFunction: '',
					devSituation: '',
					devPosition: '',
					sTime: '',
					eTime: '',
					isAnxious: '',
				},
				showDialog1: false,
				showDialog2: false,
				showDialog3: false
			}
		},
		computed: mapState(['userName','userId']),
		
		onLoad(event) {
		    // 目前在某些平台参数会被主动 decode，暂时这样处理。
		    try {
		        this.listData = JSON.parse(decodeURIComponent(event.detailDate));
				console.log(this.listData);
		    } catch (error) {
		        this.listData = JSON.parse(event.detailDate);
		    }
		},
		onShareAppMessage() {
		    return {
		        path: '/pages/user/detail_reservation?detailDate=' + JSON.stringify(this.listData)
		    }
		},
		methods: {
			handleShow1() {
				this.showDialog1 = true;
			},
			clickCancel1() {
				this.showDialog1 = false;
			},
			clickConfirm1() {
				this.showDialog1 = false;
			},
			//----------------------
			handleShow2() {
				this.showDialog2 = true;
			},
			clickCancel2() {
				this.showDialog2 = false;
			},
			clickConfirm2() {
				uni.request({
					url: 'http://115.159.219.165:8080/devices/deleteApply',
					method: 'POST',
					data: {
						appId: this.listData.id,
					},
					success: function(data){
						console.log(data.data);
						uni.switchTab({
							url: 'user',
						});
						uni.showToast({
							title: '取消成功',
							icon: 'success',
							duration: 2000
						});
						
					}.bind(this),
					fail:function(data, code){
						console.log('fail' + JSON.stringify(data));
					}
				});
				this.showDialog2 = false;
			},
			//----------------------
			handleShow3() {
				this.showDialog3 = true;
			},
			clickCancel3() {
				this.showDialog3 = false;
			},
			clickConfirm3() {
				this.showDialog3 = false;
				uni.switchTab({
					url: 'user',
				});
				uni.showToast({
					title: '设备报修成功',
					icon: 'success',
					duration: 2000
				});
			}
			
        }
	}
</script>

<style>
	.title1 {
		font-size: 26px;
		color: $light_gray;
	
		text-align: center;
		font-weight: bold;
	}
	.uni-form-item {
		padding: 20upx 0;
		align-items: center;
	}
	.input-row .title {
		width: 30%;
		height: 30px;
		padding: 10px 0;
		padding-left: 30px;
		line-height: 30px;
	}
	.checkboxed {
		height: 30px;
		padding: 10px 0;
		padding-left: 7px;
		line-height: 30px;
	}
	.test{
        text-align: center;
        padding: 10px 0;
    }
    button{
        margin: 20upx;
        font-size: 28upx;
    }
</style>
